<template>
  <ul class="tabs-panel-box">
    <li
      v-for="(item, index) in tabsList"
      :key="index"
      :class="[activeNum === index ? 'active' : '']"
      @click="onHandleTab(index, item)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref } from "vue";
import * as detail from "@/layouts/components/detail.js";
import { overviewStore } from "@/stores/overview";
import areaData from "@/assets/json/area.json";

const store = overviewStore();

const tabsList: any = ref([
  {
    name: "阳光城社区",
    type: "巨丰小区",
  },
  {
    name: "榆康社区",
    type: "曼哈顿小区",
  },
  {
    name: "桃李路社区",
    type: "和顺嘉府小区",
  },
  {
    name: "兴达路社区",
    type: "桃园小区",
  },
  {
    name: "开源路社区",
    type: "元驰小区",
  },
  {
    name: "圣景路社区",
    type: "圣景名苑小区",
  },
]);

const activeNum = ref(-1);

const onHandleTab = (index: number, data: any) => {
  const { type } = data;
  activeNum.value = index;
  detail.toView(type, (attr:any) => {
    // debugger
    const {peopleInfo, xqName} = attr;
    const { features } = areaData;
    const village:any = features.filter((item:any) => item?.properties.XQ_Name === xqName);

    if(!village.length) return;
    const villageInfo = village[0].properties.attr
    const info = villageInfo['小区概况'];
    store.villageInfo = info['重点人群'];

    store.peopleList = peopleInfo;
    store.isShowPeople = true;
  });
};
</script>

<style lang="scss" scoped>
.tabs-panel-box {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  li {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff69;
    box-sizing: border-box;
    border: 1px solid transparent;
    margin-right: 20px;
    cursor: pointer;
  }
  .active {
    background: rgb(19 84 189);
    border: 1px solid #00c8ff;
  }
}
</style>
